<template>
  <div class="track">

    <div class="contbg">

      <!-- 头部slogon -->
      <div class="trackslogon">
        <img src="@/assets/image/competition/trackbg.png" alt="">
      </div>

      <!-- 大轮播图 -->
      <div class="trackLunbo">
        <div class="xialakuang">
          <p><img class="imgdz3" src="@/assets/image/competition/xlimg.png" alt=""><span class="tuijiantitle">标题文本/LOGO</span></p>
          <div class="xlkwarp" ref="xlkwarp">

            <div class="tuijianwarp">
              <img class="uprow" src="@/assets/image/competition/uprow.png" alt="" @click="upwarp(downi)">
              <img class="downrow"  src="@/assets/image/competition/downrow.png" alt="" @click="downwarp(downi)">
              <div class="tjwarp2" ref="tjwarp2">
                <div class="tuijianli" v-for="(item,i) in RecommedsData">
                  <img src="@/assets/image/competition/live2.png" alt="">
                  <p class="jiabinname">{{item.title}}</p>
                </div>
              </div>

            </div>
          </div>
          <div class="shouqidiv" @click="putaway()">
            收起
          </div>
        </div>
        <p class="saidaoname">互联网及服务</p>
        <div class="sdintroduce">
          <p class="jstitle">赛道介绍</p>
          <p>活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展引导社会各界机构持续关注残疾人、残疾人家庭事业发展。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人…</p>
        </div>
        <div>
          <img class="imgdz1" src="@/assets/image/competition/saidaobg1.png" alt="">
          <img class="imgdz2"  src="@/assets/image/competition/saidaobg2.png" alt="">
        </div>
        <img src="@/assets/image/competition/saidaobg.png" alt="">
      </div>
      <!-- 投票赛道 -->
      <div class="tracContent">
        <div class="tracktoupiao">
          <div class="toupiaoTop">
            <ul class="toupiaochange">
              <li v-for="(val,index) in models" :class="{'actived':indexd==index}"  @click="changeModel(index)">
                <span class="lefttxt">{{val.name}}</span>
                <span class="havenum" v-if="indexd==index">已报名100人</span>
                <span class="wxfr">
                  <span class="livongpoint"></span>
                  <span class="livingtxt">直播中</span>
                </span>
              </li>
            </ul>
          </div>
          <div class="toupiaoBottom">
            <p class="mt10">
              活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人。
            </p>
            <div class="hr2px mt16"></div>
            <div class="mt15">
              <div class="tpbutton" @click="votewhe=true">投票（126）</div>
              <div class="zhankai">展开</div>
            </div>
          </div>

        </div>
      </div>

      <!-- 场景进程 -->
      <div class="wxprocess">
        <div class="processTitle">
          场景进程
        </div>
        <div class="wxstep">
          <div class="leftrow"></div>
          <div class="rightrow"></div>
          <a-steps progress-dot :current="1">
                <a-step>
                  <template slot="title">
                    <p class="tarimg"><img src="@/assets/image/competition/stepicon.png" alt=""></p>
                    <span class="titlestep">初赛</span>
                  </template>
                  <template slot="subTitle">
                    <span class="subtitlestep">项目征集</span>
                    <p><span class="descriptionstep">5月11日 ～ 12月11日</span></p>
                  </template>
                </a-step>
                <a-step>
                  <template slot="title">
                    <p class="tarimg"><img src="@/assets/image/competition/stepicon.png" alt=""></p>
                    <span class="titlestep">复赛</span>
                  </template>
                  <template slot="subTitle">
                    <span class="subtitlestep">公开投票</span>
                    <p><span class="descriptionstep">5月11日 ～ 12月11日</span></p>
                  </template>
                </a-step>
                <a-step>
                  <template slot="title">
                    <p class="tarimg"><img src="@/assets/image/competition/stepicon.png" alt=""></p>
                    <span class="titlestep">决赛</span>
                  </template>
                  <template slot="subTitle">
                    <span class="subtitlestep">公布结果</span>
                    <p><span class="descriptionstep">12月11日</span></p>

                  </template>
                </a-step>
              </a-steps>

        </div>
      </div>

      <!-- 中间广告栏 -->
      <div class="middleAds">
        <img src="@/assets/image/competition/middeleguang.png" alt="">
      </div>

      <!-- 竞选项目 -->
      <div class="jxitem">
        <div class="jstop">
          <div class="jxtitle">
            竞选项目
          </div>
          <div class="dsplil">
            <p class="gztxt"><img class="tipsicon" src="@/assets/image/competition/gantan.png" alt="">投票规则</p>
            <p class="gzms">公开投票后用户每隔两天有5次投票机会。</p>
          </div>
          <div>
            <ul class="jxselect">
              <li v-for="(item,i) in selectjxData" :class="{'active':jxselectindex==i}" @click="selectjx(i)">{{item.title}}</li>
            </ul>
          </div>
        </div>
        <!-- 列表 -->
        <div class="jxcontent">
          <ul class="contentlist">
            <li v-for="(item,i) in trackData">
              <p class="articleimg">
                <img src="@/assets/image/competition/article.png" alt="">
              </p>
              <div class="articletitle">
                <p class="txt8" @click="gotodetails()">{{item.title}}</p>
                <p class="mt16">
                  <span class="border50"></span>
                  <span class="company" @click="gotocompany()">企业名称</span>
                  <span class="bqname">标签名称</span>
                </p>
                <div v-if="item.state==0" class="sujxbtn" @click="votewhe=true">
                  投票（126）
                </div>
                <div v-if="item.state==1"  class="sujxbtn" @click="commentShow=true">
                  点评
                </div>
              </div>
            </li>

          </ul>
          <!-- 分页 -->
          <div class="pagenation">
            <a-pagination v-model:current="current" :total="50" show-less-items />
          </div>

        </div>

      </div>
      <!-- 热门点评 -->
      <div class="hotdp">
        <div class="dptoptitle">
          热门点评
        </div>
        <div class="dpcontent">
          <div class="dplists" v-for="(item,i) in dpData">
            <img class="zjtx" src="@/assets/image/competition/zjinfo.png" alt="">
            <div class="listhot">
              <p>
                <span class="txt9">{{item.name}}</span><span class="txt10">{{item.title}}</span>
              </p>
              <p class="pjduan">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。</p>
              <p class="pjxmtxt"><span>评价项目:</span><span class="xmnr" @click="gotodetails()">项目名称内容文本项目名称内容</span></p>
            </div>
          </div>

        </div>
      </div>
      <!-- 资讯报道 -->
      <div class="newsreport">
        <div class="dptoptitle">
          资讯报道
        </div>
        <div class="zxuls wxfrs">
          <ul>
          	<li @click="changelanmu(0)" :class="{'actived':lmindex==0}"> 栏目一 </li>
            <li @click="changelanmu(1)" :class="{'actived':lmindex==1,'isSlash':true}"> 栏目二 </li>
            <li @click="changelanmu(2)" :class="{'actived':lmindex==2,'isSlash':true}"> 栏目二 </li>
            <li @click="changelanmu(3)" :class="{'actived':lmindex==3,'isSlash':true}"> 栏目二 </li>
            <li @click="changelanmu(4)" :class="{'actived':lmindex==4,'isSlash':true}"> 栏目二 </li>
            <li @click="changelanmu(5)" :class="{'actived':lmindex==5}"> 全部风采 </li>
          </ul>
        </div>
        <div class="neslists">
          <div class="wxnews">
            <div class="imgnews">
              <img src="@/assets/image/competition/section9pic.png" alt="">
            </div>
            <div class="wxtitles">
              项目名称内容文本项目名称…
            </div>
          </div>
          <div class="wxnews">
            <div class="imgnews">
              <img src="@/assets/image/competition/section9pic.png" alt="">
            </div>
            <div class="wxtitles">
              项目名称内容文本项目名称…
            </div>
          </div>
          <div class="wxnews">
            <div class="imgnews">
              <img src="@/assets/image/competition/section9pic.png" alt="">
            </div>
            <div class="wxtitles">
              项目名称内容文本项目名称…
            </div>
          </div>
          <div class="wxnews">
            <div class="imgnews">
              <img src="@/assets/image/competition/section9pic.png" alt="">
            </div>
            <div class="wxtitles">
              项目名称内容文本项目名称…
            </div>
          </div>
          <div class="wxnews">
            <div class="imgnews">
              <img src="@/assets/image/competition/section9pic.png" alt="">
            </div>
            <div class="wxtitles">
              项目名称内容文本项目名称…
            </div>
          </div>
        </div>
      </div>
      <!-- 回看 -->
      <div class="videoReport">
        <div class="dptoptitle">
          录播/回放
        </div>
        <div class="sectionConet8">


          <div class="swiper-advertise">
              <swiper ref="mySwipers" :options="swperset">
                <swiper-slide v-for="(item,index) in fengcaiData" :key="index">
                  <div class="fengcais">
                    <img src="@/assets/image/competition/live4.png" alt="">
                    <div class="fengcainame">
                      <p class="fcms">{{item.title}}</p>
                    </div>
                  </div>
                </swiper-slide>
              </swiper>
              <!-- 前进后退按钮 -->
              <div
                v-if="fengcaiData.length > 4"
                class=""
                slot="button-prev"
                @click="swiperPrev"
              >
                <img class="leftjtposition" src="@/assets/image/competition/leftjt2.png" alt="">
              </div>
              <div
                v-if="fengcaiData.length > 4"
                class=""
                slot="button-next"
                @click="swiperNext"
              >
                <img class="rightjtposition" src="@/assets/image/competition/rightjt2.png" alt="">
              </div>
          </div>
        </div>
      </div>

      <!-- 投票弹窗 -->
      <div>
        <a-modal v-model:visible="votewhe" title="" width="292px" @ok="votewhe=false">
          <p><img src="@/assets/image/competition/gth2.png" alt=""><span class="text20">确认要给该场景投票吗？</span></p>
          <p></p>
        </a-modal>
      </div>

      <!-- 选择项目弹窗 -->
      <div>
        <a-modal v-model:visible="selectitem" title="" :footer="null" width="320px" height="92px">
          <p class="tittxt mb332">选择项目</p>
          <div style="text-align: center;">
            <p class="mb11"><img src="@/assets/image/competition/seleitm.png" alt=""></p>
            <span class="txt33 mb40">您还没有可以参加竞选的项目快去个人中心创建一个吧～</span>
          </div>
          <div class="btn1" @click="gotoEnetrprise()">
            前往个人中心
          </div>
        </a-modal>
      </div>

      <!-- 视频播放弹窗 -->
      <div>
        <a-modal v-model:visible="videoplay" title="" :footer="null" width="1000px">
          <p class="tittxt mb332 txtal">视频标题内容文本视频标题内容文本视频标题内容文本</p>
          <div style="text-align: center;">
            <video width="960" height="" style="background: #000;">
              <source src="myvideo.mp4" type="video/mp4">
              </source>
              <source src="myvideo.ogv" type="video/ogg">
              </source>
              <source src="myvideo.webm" type="video/webm">
              </source>
              <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
                <param name="movie" value="myvideo.swf" />
                <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
              </object>
              当前浏览器不支持 video直接播放，点击这里下载视频: <a href="myvideo.webm">下载视频</a>
            </video>
          </div>
        </a-modal>
      </div>


      <!-- 点评弹窗 -->
      <div>
        <a-modal v-model:visible="commentShow" title="" width="772px" height="92px" @ok="commentShow=false">
          <p class="tittxt txtmb32">点评项目</p>
          <div>
            <p class="mrbt8"><span class="redtxt">*</span> 专家图片</p>
            <div>
              <a-upload  name="avatar" list-type="picture-card" class="avatar-uploader"
                :show-upload-list="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :before-upload="beforeUpload">
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                  <loading-outlined v-if="loading"></loading-outlined>
                  <plus-outlined v-else></plus-outlined>
                  <img style="width:76px;" src="@/assets/image/competition/uploadImg.png" alt="image">
                </div>
              </a-upload>
              <span class="txt32">只支持.jpg，.png 格式,不能大于1G</span>
            </div>
            <div class="zjform">
              <div class="zjinfotj">
                <p class="mrbt8"><span class="redtxt">*</span> 专家姓名</p>
                <a-input v-model:value="value" placeholder="" />
              </div>
              <div class="zjinfotj">
                <p class="mrbt8"><span class="redtxt">*</span> 专家职务</p>
                <a-input v-model:value="value" placeholder="" />
              </div>
            </div>
            <div>
              <p class="mrbt8 mt8">专家简介</p>
              <p>
                <a-textarea v-model:value="value" placeholder="输入简介内容" :rows="3" />
              </p>
            </div>
            <div>
              <p class="mrbt8 mt8"><span class="redtxt">*</span> 点评</p>
              <p>
                <a-textarea v-model:value="value" placeholder="输入点评内容" :rows="3" />
              </p>
            </div>
          </div>

          <template #footer>
                  <a-button key="back" @click="handleCancel">取消</a-button>
                  <a-button key="submit" type="primary" :loading="loading" @click="commentShow=false">提交</a-button>
                </template>

        </a-modal>
      </div>

      <!-- 选择点评项目弹窗 -->
      <div>
        <a-modal v-model:visible="itemlist" title="" width="772px" height="92px" @ok="closeItemlist">
          <p class="tittxt txtmb32">选择项目</p>
          <div class="itemsshow">
            <!-- <a-radio-group v-model:value="value1" size="large">
              <a-radio value="a">
                <img class="iteming" src="@/assets/image/competition/itemselect.png" alt="">
                <p class="txtline">项目名称内容文本项目名称内容文本项目名称内容文本</p>
              </a-radio>
              <a-radio value="b">
                <img class="iteming" src="@/assets/image/competition/itemselect.png" alt="">
                <p class="txtline">项目名称内容文本项目名称内容文本项目名称内容文本</p>
              </a-radio>
              <a-radio value="c">
                <img class="iteming" src="@/assets/image/competition/itemselect.png" alt="">
                <p class="txtline">项目名称内容文本项目名称内容文本项目名称内容文本</p>
              </a-radio>
              <a-radio value="d">
                <img class="iteming" src="@/assets/image/competition/itemselect.png" alt="">
                <p class="txtline">项目名称内容文本项目名称内容文本项目名称内容文本</p>
              </a-radio>
              <a-radio value="e">
                <img class="iteming" src="@/assets/image/competition/itemselect.png" alt="">
                <p class="txtline">项目名称内容文本项目名称内容文本项目名称内容文本</p>
              </a-radio>
              <a-radio value="f">
                <img class="iteming" src="@/assets/image/competition/itemselect.png" alt="">
                <p class="txtline">项目名称内容文本项目名称内容文本项目名称内容文本</p>
              </a-radio>
            </a-radio-group> -->
            <a-checkbox-group @change="onChange">
                <a-checkbox value="a">
                  <div class="selecteproject">
                    <img class="iteming" src="@/assets/image/competition/itemselect.png" alt="">
                    <p class="txtline">项目名称内容文本项目名称内容文本项目名称内容文本</p>
                  </div>
                </a-checkbox>
                <a-checkbox value="b">
                  <div class="selecteproject">
                    <img class="iteming" src="@/assets/image/competition/itemselect.png" alt="">
                    <p class="txtline">项目名称内容文本项目名称内容文本项目名称内容文本</p>
                  </div>
                </a-checkbox>
                <a-checkbox value="c">
                  <div class="selecteproject">
                    <img class="iteming" src="@/assets/image/competition/itemselect.png" alt="">
                    <p class="txtline">项目名称内容文本项目名称内容文本项目名称内容文本</p>
                  </div>
                </a-checkbox>
                <a-checkbox value="d">
                  <div class="selecteproject">
                    <img class="iteming" src="@/assets/image/competition/itemselect.png" alt="">
                    <p class="txtline">项目名称内容文本项目名称内容文本项目名称内容文本</p>
                  </div>
                </a-checkbox>
                <a-checkbox value="e">
                  <div class="selecteproject">
                    <img class="iteming" src="@/assets/image/competition/itemselect.png" alt="">
                    <p class="txtline">项目名称内容文本项目名称内容文本项目名称内容文本</p>
                  </div>
                </a-checkbox>
                <a-checkbox value="f">
                  <div class="selecteproject">
                    <img class="iteming" src="@/assets/image/competition/itemselect.png" alt="">
                    <p class="txtline">项目名称内容文本项目名称内容文本项目名称内容文本</p>
                  </div>
                </a-checkbox>
                <!-- <a-checkbox-group @change="onChange" style="width:300px">
                    <a-row>
                      <a-col :span="6" v-for="item in options" v-bind:key="item.value">
                        <a-checkbox :disabled="item.disabled" :value="item.value">{{item.label}}</a-checkbox>
                        </a-col>
                    </a-row>
                  </a-checkbox-group> -->
            </a-checkbox-group>
          </div>
        </a-modal>
      </div>

    </div>





  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading:false,
        current: 2,
        votewhe: false,
        commentShow: false,
        value1: 'a',
        selectitem: true,
        itemlist: true,
        videoplay: false,
        indexd:0,
        jxselectindex:0,
        selectjxData:[
          {title:'初赛'},
          {title:'复赛'},
          {title:'决赛'}
        ],
        dpData:[
          {name:'李明',title:'人物职称/title内容文本'},
          {name:'李明',title:'人物职称/title内容文本'},
          {name:'李明',title:'人物职称/title内容文本'},
          {name:'李明',title:'人物职称/title内容文本'},
        ],
        trackData:[
          {title:'项目名称内容文本项目名称内容文本项目名称',state:0},
          {title:'项目名称内容文本项目名称内容文本项目名称',state:1},
          {title:'项目名称内容文本项目名称内容文本项目名称',state:0},
          {title:'项目名称内容文本项目名称内容文本项目名称',state:0},
          {title:'项目名称内容文本项目名称内容文本项目名称',state:1},
          {title:'项目名称内容文本项目名称内容文本项目名称',state:0},
          {title:'项目名称内容文本项目名称内容文本项目名称',state:0},
          {title:'项目名称内容文本项目名称内容文本项目名称',state:1},
          {title:'项目名称内容文本项目名称内容文本项目名称',state:0},
          {title:'项目名称内容文本项目名称内容文本项目名称',state:0},
          {title:'项目名称内容文本项目名称内容文本项目名称',state:0},
          {title:'项目名称内容文本项目名称内容文本项目名称',state:0},
        ],
        models:[
          {'id':0,'name':'低代码'},
          {'id':1,'name':'低代码'},
          {'id':2,'name':'低代码'},
        ],
        lmindex:0,
        fengcaiData:[
          {'title':'中国人民大学信息学院院长高瓴人工智能学院'},
          {'title':'中国人民大学信息学院院长高瓴人工智能学院'},
          {'title':'中国人民大学信息学院院长高瓴人工智能学院'},
          {'title':'中国人民大学信息学院院长高瓴人工智能学院'},
          {'title':'中国人民大学信息学院院长高瓴人工智能学院'},
          {'title':'中国人民大学信息学院院长高瓴人工智能学院'},
        ],

        swperset:{
          slidesPerView: 4,
          centeredSlides: true,
          centeredSlidesBounds: true,
          navigation: {
            disabledClass: "my-button-disabled",
          },
        },
        swiperLeft: false,
        swiperRight: false,
        swiperworkLeft: false,
        swiperworkRight: false,
        RecommedsData:[
          {title:'海上世界'},
          {title:'海上世界'},
          {title:'海上世界'},
          {title:'海上世界'},
          {title:'海上世界'},
          {title:'海上世界'},
          {title:'海上世界'},
          {title:'海上世界'},
        ],
        value:'',
        downi:0,
      }
    },

    watch: {

    },
    mounted() {


    },
    methods: {
      sureVote() {
        this.votewhe = false;
      },
      selectjx(i){
        this.jxselectindex=i;
      },
      closeItemlist() {
        this.itemlist = false;
      },
      gotodetails() { //进入项目详情
        this.$router.push('/competition/details');
      },
      changeModel(e){
        this.indexd=e
      },
      gotocompany(){
        this.$router.push('/competition/company');
      },
      changelanmu(e){
        this.lmindex=e
      },
      swiperNext() {
        this.$refs.mySwipers.$swiper.slideNext();
      },
      swiperPrev() {
        this.$refs.mySwipers.$swiper.slidePrev();
      },
      changeMask(e) {
        if (e == 1) {
          this.swiperLeft = true;
        } else if (e == 2) {
          this.swiperLeft = false;
        } else if (e == 3) {
          this.swiperRight = true;
        } else if (e == 4) {
          this.swiperRight = false;
        } else if (e == 5) {
          this.swiperworkLeft = true;
        } else if (e == 6) {
          this.swiperworkLeft = false;
        } else if (e == 7) {
          this.swiperworkRight = true;
        } else if (e == 8) {
          this.swiperworkRight = false;
        }
      },
      putaway(){
        if(this.$refs.xlkwarp.style.height=='550px'){
          this.$refs.xlkwarp.style.height=0;
        }else{
          this.$refs.xlkwarp.style.height='550px';
        }

      },
      downwarp(){
        if(this.downi<this.RecommedsData.length-3){
          this.downi=this.downi+1;
          this.$refs.tjwarp2.style.marginTop='-'+166*this.downi+'px';
        }
      },
      upwarp(){
        console.log()
        if(this.downi>0){
          this.downi=this.downi-1;
          this.$refs.tjwarp2.style.marginTop=parseInt(this.$refs.tjwarp2.style.marginTop)+166+'px';
        }
      },
      gotoEnetrprise(){
        this.$router.push('/enterpriseCenter/information');
      }
    }
  }
</script>

<style scoped="scoped">
  .shouqidiv{
    width: 242px;
    height: 32px;
    background: #3C7EFF;
    border-radius: 0px 0px 4px 4px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    transition: .5s;
  }

  .xlkwarp{
    width: 242px;
    height: 550px;
    background: #00000040;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }

  .xialakuang{
    position: absolute;
    top:50px;
    right: 71px;
    z-index: 2;
  }
  .saidaoname{
    font-size: 95px;
    font-family: fantasy;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 130px;
    text-shadow: 0px 2px 4px rgb(149 44 44);
    position: absolute;
    top: 138px;
    text-align: center;
    width: 1440px;
  }

  .sdintroduce{
    width: 1200px;
    position: absolute;
    top:308px;
    left:120px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
  }

  .jstitle{
    font-size: 20px;
    font-family: FZZZHONGHK--GBK1-0, FZZZHONGHK--GBK1;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 25px;
    margin-bottom: 16px;
    font-weight: 600;
  }

  .dptoptitle {
    width: 128px;
    height: 40px;
    background: #171F8A;
    border-radius: 0px 100px 100px 0px;
    font-size: 22px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
  }

  .selecteproject{
    width: 220px;
    height: 217px;
  }

  .tipsicon{
    margin-right: 3px;
  }

  .havenum{
    position: absolute;
    left: 16px;
    bottom: -8px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }

  .contbg {
    width: 1440px;
    margin: 0 auto;
    background: #fff;
  }

  .redtxt {
    color: #D51313;
  }

  .txt33 {
    width: 184px;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .mb11 {
    margin-bottom: 11px;
  }

  .mb40 {
    margin-bottom: 40px;
  }

  .mb332 {
    margin-bottom: 32px;
  }

  .btn1 {
    width: 180px;
    height: 40px;
    background: #FFBE37;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    text-align: center;
    line-height: 40px;
    margin: 0 auto;
    cursor: pointer;
  }

  .txtmb32 {
    margin-bottom: 32px;
  }

  .txtline {
    line-height: 20px;
    margin-top: 8px;
  }

  .iteming {
    width: 220px;
    height: 165px;
  }

  .txt32 {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }

  .mrbt8 {
    margin-bottom: 8px;
  }

  .mt8 {
    margin-top: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .text20 {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    vertical-align: middle;
    margin-left: 8px;
  }

  .leftjtposition {
    position: absolute;
    left: -60px;
    top: 50%;
    cursor: pointer;
  }

  .rightjtposition {
    position: absolute;
    right: -56px;
    top: 50%;
    cursor: pointer;
  }

  .sectionConet8 {
    margin-top: 32px;
  }

  .wxfengcai {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-between;
    align-items: center;
  }

  .fengcais {
    display: inline-block;
    position: relative;
    width: 256px;
    height: 170px;
  }

  .fengcainame {
    width: 256px;
    height: 32px;
    background: #000000;
    opacity: 0.6;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: left;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-family: PingFangSC-Medium;
    line-height: 24px;
    text-align: center;
    margin-top: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .videoReport {
    width: 1440px;
    margin: 0 auto;
    position: relative;
    padding: 60px 120px;
  }

  .neslists {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 32px;
    width: 1200px;
  }

  .wxtitles {
    width: 220px;
    height: 40px;
    background: #FFFFFF;
    padding: 8px 12px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
  }

  .imgnews>img {
    width: 220px;
    height: 146px;
    background: #D8D8D8;
  }

  .wxnews {
    width: 220px;
    height: 186px;
  }

  .newsreport {
    width: 1440px;
    height: 378px;
    background: #F0F1F5;
    padding: 60px 120px;
  }

  .xmnr {
    color: #3C7EFF;
    cursor: pointer;
  }

  .txtal {
    text-align: left !important;
  }

  .zxuls{
    width: 410px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 22px;
  }

  .zxuls>ul>li{
    display: inline-block;
    margin-right: 5px;
    color: #333333;
    cursor: pointer;
  }

  .isSlash::before{
    display: inline-block;
    content: '/';
    color: #333333;
  }

  .zxuls>ul>li:nth-last-child(1)::before{
    display: inline-block;
    content: '|';
    color: #333333;
  }

  .zxuls>ul>li.actived{
    color: #3C7EFF;
  }

  .pjxmtxt {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .tittxt {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    text-align: center;
  }

  .pjduan {
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
  }

  .txt9 {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }

  .dplists {
    position: relative;
    width: 576px;
    height: 142px;
    margin-bottom: 40px;
  }

  .zjtx {
    width: 120px;
    height: 120px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.3);
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    top: 10px;
  }

  .dpcontent {
    width: 1200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 32px;
  }

  .listhot {
    width: 516px;
    height: 142px;
    background: #FFFFFF;
    box-shadow: 0px 2px 8px 0px rgba(12, 16, 62, 0.16);
    border-radius: 10px;
    position: absolute;
    left: 64px;
    padding: 16px 16px 16px 72px;
  }

  .hotdp {
    width: 1200px;
    height: 516px;
    padding: 60px 120px;
  }

  .track {
    width: 100%;
    margin: 0 auto;
    background: #F0F1F5;
    min-height: 500px;
    padding-bottom: 1px;
  }

  .txt8 {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    cursor: pointer;
    line-height: 24px;
  }

  .pagenation {
    margin-top: 20px;
    text-align: center;
  }

  .contentlist {
    width: 1225px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: flex-start;
    align-items: center;
  }

  .txt10 {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin-left: 8px;
  }

  .bqname {
    width: 64px;
    height: 18px;
    background: rgba(29, 76, 227, 0.1);
    border-radius: 9px;
    float: right;
    display: inline-block;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3C7EFF;
    text-align: center;
    line-height: 18px;
    /* margin-top: 5px; */
  }

  .sujxbtn {
    width: 250px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 51px;
    border: 1px solid #F45827;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #F45827;
    text-align: center;
    line-height: 32px;
    margin-top: 12px;
    cursor: pointer;
    transition: .5s;
  }

  .sujxbtn:hover{
    color: #fff;
    background: #F45827;
  }

  .zjinfotj {
    display: inline-block;
    width: 330px;
  }

  .zjform {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    margin-top: 20px;
  }

  /* .sujxbtna {
    color: #fff;
    background: #F45827;
  } */

  .border50 {
    width: 24px;
    height: 24px;
    background-color: rgba(216, 216, 216, 1);
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
  }

  .trackslogon {
    width: 1440px;
    height: 100px;
    background: #0D0522;
  }

  .trackLunbo {
    width: 1440px;
    height: 665px;
    position: relative;
    /* background: #171F8A; */
  }

  .tracktoupiao {
    width: 1200px;
    height: 268px;

    border-radius: 0px 10px 10px 10px;
  }

  .tracContent {
    width: 1200px;
    margin: 0 auto;
  }

  .toupiaoTop {
    height: 80px;
    background: #fff;
  }

  .lefttxt {
    text-align: left;
    float: left;
    margin-left: 16px;
    font-size: 20px;
  }

  .toupiaochange li {
    width: 240px;
    height: 60px;
    background: #DCE4F5;
    display: inline-block;
    text-align: center;
    line-height: 60px;
    vertical-align: bottom;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #3C7EFF;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    cursor: pointer;
    position: relative;
  }

  .toupiaochange li.actived {
    height: 80px;
    background: #3C7EFF;
    color: #fff !important;
  }

  .toupiaochange li.actived::before {
    display: block;
    content: '';
    border-left: 8px solid transparent;
    border-top: 8px solid #3C7EFF;
    border-bottom: 0;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -4px;
  }

  .toupiaochange li:nth-child(2) {
    margin: 0 8px;
  }

  .toupiaoBottom {
    width: 1200px;
    height: 188px;
    background: #F0F1F5;
    border-radius: 0px 10px 10px 10px;
    padding: 32px;
  }

  .mt10 {
    margin-top: 10px;
  }

  .mt16 {
    margin-top: 16px;
  }

  .mt15 {
    margin-top: 15px;
  }

  .hr2px {
    width: 1136px;
    height: 1px;
    border: 1px solid #D9D9D9;
  }

  .tpbutton {
    width: 240px;
    height: 40px;
    background: #F45827;
    border-radius: 51px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
  }

  .zhankai {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3C7EFF;
    text-decoration: underline;
    float: right;
    cursor: pointer;
    margin-top: -20px;
  }

  .livingtxt {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #F45827;
  }

  .actived .livongpoint{
    background: #fff!important;
  }

  .actived .livingtxt{
    color: #fff!important;
  }

  .livongpoint {
    width: 4px;
    height: 4px;
    background: #F45827;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
  }

  .wxfr {
    float: right;
    margin-right: 16px;
  }

  .wxfrs{
    float: right;
    margin-top: -28px;
    margin-right: -24px;
  }

  .wxprocess {
    width: 1200px;
    height: 266px;
    margin: 0 auto;
    padding: 32px 0;
  }

  .processTitle {
    width: 128px;
    height: 40px;
    background: #171F8A;
    border-radius: 0px 100px 100px 0px;
    line-height: 40px;
    font-size: 22px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
  }

  .wxstep {
    margin: 76px auto 0 auto;
    width: 826px;
    position: relative;
  }

  .middleAds {
    width: 1200px;
    height: 180px;
    margin: 0 auto;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  .jxitem {
    width: 1440px;
    height: 1414px;
    background: #F0F1F5;
    padding: 60px 120px;
  }

  .gztxt {
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #F45827;
    margin-bottom: 3px;
  }

  .gzms {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-top: 5px;
  }

  .jxtitle {
    width: 128px;
    height: 40px;
    background: #171F8A;
    border-radius: 0px 100px 100px 0px;
    font-size: 22px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    display: inline-block;
  }

  .dsplil {
    display: inline-block;
    margin-left: 16px;
    vertical-align: sub;
  }

  .jxselect {
    float: right;
    margin-top: -40px;
  }

  .contentlist>li {
    width: 282px;
    height: 368px;
    display: inline-block;
    margin-bottom: 24px;
    margin-right: 24px;
  }

  .jxcontent {
    margin-top: 32px;
  }

  .jxselect>li {
    display: inline-block;
    width: 98px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 3px;
    background: url(~@/assets/image/competition/jxselect.png) no-repeat;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
    color: #171F8A;
  }

  .jxselect>li.active {
    background: url(~@/assets/image/competition/jxselecta.png) no-repeat;
  }

  .articleimg {
    width: 282px;
    height: 212px;
  }

  .articletitle {
    width: 282px;
    height: 156px;
    background: #FFFFFF;
    padding: 12px 16px;
  }

/deep/.ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin-left: 0;
}

/deep/.ant-checkbox-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    align-items: center;
}

/deep/.ant-modal-footer {
    padding: 10px 16px;
    text-align: center;
    background: transparent;
    border-top:0;
    border-radius: 0 0 4px 4px;
}

  /deep/ .ant-upload-picture-card-wrapper {
    width: 118px;
  }

  /deep/.ant-checkbox-inner {
    border: 1px solid #3C7EFF;
    border-radius: 50%;
    width: 18px;
        height: 18px;
}

/deep/.ant-checkbox + span {
    padding-right: 0;
    padding-left: 0;
}

/deep/.ant-checkbox-wrapper{
  position: relative;
}

/deep/.ant-checkbox {
    position: absolute;
    right: 8px;
    top: 8px;
}

/deep/.ant-checkbox-checked .ant-checkbox-inner {
    background-color: #3C7EFF;
}

/deep/.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner {
    border-color: #3C7EFF;
}

  /deep/.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border: 4px solid #171F8A;
    position: absolute;
        top: -3px;
        left: -5px;
}

/deep/.ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
    /* background: rgba(0, 0, 0, 0.25); */
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border: 4px solid #171F8A;
    position: absolute;
        top: -3px;
        left: -5px;
}

/deep/.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
    background: #FFBE37;
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border: 4px solid #171F8A;
    position: absolute;
        top: -3px;
        left: -5px;
}

/deep/.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
    background: #171F8A;
}

.titlestep{
  width: 40px;
  height: 20px;
  background: #171F8A;
  border-radius: 10px;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 20px;
}

.subtitlestep{
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 28px;
}
.descriptionstep{
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}
.tarimg{
  position: absolute;
  top: -66px;
  left: 50%;
  margin-left: -16px;
}
.leftrow{
  width: 130px;
      background: #171F8A;
      height: 3px;
      position: absolute;
      top: 2px;
      left: -62px;
}
.rightrow{
  width: 130px;
      background: #e8e8e8;
      height: 3px;
      position: absolute;
      top: 2px;
      right: -62px;
}
.company{
  cursor: pointer;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
}
.swiper-advertise{
  position: relative;
  width: 1083px;
  margin: 0 auto;
}
.imgdz1{
  position: absolute;
  top:361px
}
.imgdz2{
  position: absolute;
  right:0;
}

.jiabins{
  width: 209px;
  height: 139px;
  position: relative;
}
.jiabins>img{
  width: 209px;
  height: 139px;
}
.jiabinname{
  width: 210px;
  height: 32px;
  background: #00000050;
  color:#fff;
  padding-left: 12px;
  line-height: 32px;
  position: absolute;
  bottom: 0;
}

.tuijiantitle{
  position: absolute;
  left: 55px;
  color: #fff;
  top: 16px;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 28px;
}
.uprow{
  position: absolute;
  top:10px;
  left:50%;
  margin-left: -12px;
  cursor: pointer;
}
.downrow{
  position: absolute;
  bottom:10px;
  left:50%;
  margin-left: -12px;
  cursor: pointer;
}
.tuijianli{
  width: 210px;
  height: 139px;
  position: relative;
  margin-bottom: 24px;
}
.tuijianli>img{
  width: 210px;
  height: 139px;
}
.tuijianwarp{
  margin-left: 16px;
  height: 466px;
  overflow: hidden;
  margin-top: 40px;
}
.tjwarp2{
  transition: .5s;
}
</style>
